<template>
  <div class="main">
    <div class="title">
      Browse By Host
    </div>
    <div class="group" v-for="(n, idx) in list" :key="idx">
      <div class="headWarp">
        <div>{{n.name + (n.children[0].children.length > 0 ? '':` (${n.children.length})`)}}</div>
        <div class="line"></div>
      </div>
      <!-- 有三级目录-->
      <template v-if="n.children[0].children.length > 0">
        <div v-for="(m, key) in n.children" :key="key">
          <!--  二级标题  -->
          <div class="subTitle">
            <span>{{m.name  + ` (${m.children.length})`}}</span>
          </div>

          <div :class="['rna-warp']">
            <div class="item" v-for="(item, index) in m.children" :key="index" @click="hostClick(item)">
              <div style="width: 130px;height: 130px">
                <img :src="item.log"/>
              </div>
              <div class="oblq">{{item.name}}</div>
            </div>
          </div>
        </div>

      </template>
      <template v-else>
        <div :class="['rna-warp']">
          <div class="item" v-for="(item, idx) in n.children" :key="idx" @click="hostClick(item)">
            <div style="width: 130px;height: 130px">
              <img :src="item.log"/>
            </div>
            <div class="oblq">{{item.name}}</div>
          </div>
        </div>
      </template>
    </div>
  </div>

</template>

<script>
import {getHostsGroup} from "../../api/browse";

export default {
  name: "browseHost",
  data() {
    return {
      list: [],
      themeSort: [],
      animals: ["Vertebrate", "Invertebrate"],
      vertebrate: ['Homo sapiens', 'Callithrix jacchus' ,'Cercopithecus sabaeus', 'Chlorocebus aethiops', 'Chlorocebus sabaeus', 'Macaca fascicularis', 'Macaca mulatta', 'Macaques', 'Mus musculus', 'Epomops buettikoferi', 'Rousettus aegyptiacus', 'Sus scrofa', 'Bos taurus', 'Capra aegagrus', 'Capra hircus', 'Ovis aries', 'Felis catus', 'Gallus gallus', 'Mustela putorius furo', 'Oncorhynchus mykiss', 'Epinephelus tauvina', 'Salmo salar'],
      invertebrate: ['Aedes aegypti', 'Aedes albopictus', 'Autographa californica', 'Drosophila melanogaster', 'Sogatella furcifera', 'Spodoptera frugiperda', 'Caenorhabditis elegans'],
      nematoda: ['Caenorhabditis elegans'],
    }
  },
  mounted() {
    // let s = "Homo sapiens；Callithrix jacchus；Chlorocebus aethiops；Chlorocebus sabaeus；Macaca fascicularis；Macaca mulatta；Macaques；Mus musculus；Epomops buettikoferi；Rousettus aegyptiacus；Sus scrofa；Bos taurus；Capra aegagrus；Capra hircus；Ovis aries；Felis catus；Gallus gallus；Mustela putorius furo；Oncorhynchus mykiss；Epinephelus tauvina；Salmo salar"
    // console.log(s.split("；"))
    this.loadData()
  },
  methods: {
    async loadData() {
      const res = await getHostsGroup()
      let arr = res.data
      this.dealData(arr,  0)

      this.list = arr
      console.log(res.data)
    },
    dealData(arr, level) {
      arr.map(n => {
        if (n.children.length == 0) {
          let log = ''
          try {
            log = require(`@/assets/image/host/${n.name}.png`)
          } catch (e) {
            log = require(`@/assets/image/host/None/None.png`)
          }
          n.log = log
        }else {
          if (n.name === 'Animals') {
            n.children = this.sortByArr(n.children, this.animals)
          }
          else if (n.name === 'Vertebrate') {
            n.children = this.sortByArr(n.children, this.vertebrate)
          }
          else if (n.name === 'Invertebrate') {
            n.children = this.sortByArr(n.children, this.invertebrate)
          }
          this.dealData(n.children, level + 1)
        }
      })
    },
    sortByArr(list, sortList) {
      // 进行排序
      let j = 9999
      list.map(n => {
        let idx = sortList.indexOf(n.name)
        n.seq = idx > -1 ? (idx + 1) : j;
        j++;
      })

      list.sort((a,b) => {
        return a.seq - b.seq;
      });
      return list
    },
    hostClick(n) {
      this.$router.push({
        path: '/hostOverviwe',
        query: {
          host: n.name
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>

.main {
  width 1170px
  margin-top 20px
  font-family: Times New Roman;

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .headWarp {
    display flex
    flex-direction column
    align-items center
    margin 80px 60px 60px 60px
    font-weight 900
    font-size 30px
    color #0a2458
    text-align center
    font-family: Times New Roman;

    .line {
      margin-top 10px
      width 120px
      height 1px
      background-color #0a2458
    }
  }

  .subTitle {
    border-bottom 1px solid #e0e5ef
    margin: 10px 0 10px 0
    padding-bottom 2px
    span{
      border-top-left-radius 8px
      border-top-right-radius 8px
      font-size 20px
      font-weight 600
      display inline-block
      padding 13px 23px
      //background-color #11427d
      background-image: linear-gradient(to bottom, #11427d, rgba(17, 66, 125, 0.6));

      color #fff
    }
  }

  .rna-warp {
    display flex
    flex-wrap wrap
    padding 15px

    .item {
      flex: 0 0 20%;
      cursor pointer
      display flex
      flex-direction column
      align-items center
      margin-bottom 30px
      div {
        font-weight 600
        margin-bottom 10px
        font-family Times New Roman
        display flex
      }
    }
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }

  .center {
    justify-content center
  }
}
</style>
